<template>
  <div class="container collects">
    <van-tabs :active="active" @change="onChange">
      <van-tab title="兑换中">
        <div class="order-list">
          <div class="order" v-for="(order,index) in data" :key="index" @click="$router.push({ path: '/pages/exchangeInfo/exchangeInfo',query:{order_id:order.order_id}})">
            <div class="order-title">
              <span class="order-sn">订单编号：{{order.order_sn}}</span>
              <span class="order-status" v-if="order.exchange_status==0">待发货</span>
              <span class="order-status" v-if="order.exchange_status==1">待收货</span>
              <span class="order-status" v-if="order.exchange_status==2">已收货</span>
            </div>
            <div class="receipt-box">
              <div class="receipt">
                <div class="receipt-header">
                  <div class="receipt-pic">
                    <img mode="widthFix" :src="order.goods_info.image_url" />
                  </div>
                  <div class="receipt-info">
                    <p class="receipt-title">{{order.goods_info.goods_name}} {{order.goods_info.goods_sn}}</p>
                    <div class="receipt-note">
                      <p class="receipt-note-type">规格：</p>
                      <p class="receipt-note-describe">
                        <span>
                          <span>{{order.goods_info.spec_key_name}}</span>
                        </span>
                        <i-icon type="enter" />
                      </p>
                    </div>
                    <div class="receipt-des">
                      <p class="receipt-price">{{order.goods_info.points_number}}积分</p>
                      <p class="receipt-nst">x{{order.goods_info.sale_num}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="order-controller">
              <div class="line"></div>
              <i-button v-if="order.exchange_status==2" type="primary" size="small" i-class="order-btn primary-btn"
                shape="circle" @click.stop="handleOrder(2,order.order_id)">确认收货</i-button>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="兑换完成">
        <div class="order-list">
          <div class="order" v-for="(order,index) in data" :key="index" @click="$router.push({ path: '/pages/exchangeInfo/exchangeInfo',query:{order_id:order.order_id}})">
            <div class="order-title">
              <span class="order-sn">订单编号：{{order.order_sn}}</span>
              <span class="order-status" v-if="order.exchange_status==0">待发货</span>
              <span class="order-status" v-if="order.exchange_status==1">待收货</span>
              <span class="order-status" v-if="order.exchange_status==2">已收货</span>
            </div>
            <div class="receipt-box">
              <div class="receipt">
                <div class="receipt-header">
                  <div class="receipt-pic">
                    <img mode="widthFix" :src="order.goods_info.image_url" />
                  </div>
                  <div class="receipt-info">
                    <p class="receipt-title">{{order.goods_info.goods_name}} {{order.goods_info.goods_sn}}</p>
                    <div class="receipt-note">
                      <p class="receipt-note-type">规格：</p>
                      <p class="receipt-note-describe">
                        <span>
                          <span>{{order.goods_info.spec_key_name}}</span>
                        </span>
                        <i-icon type="enter" />
                      </p>
                    </div>
                    <div class="receipt-des">
                      <p class="receipt-price">{{order.goods_info.points_number}}积分</p>
                      <p class="receipt-nst">x{{order.goods_info.sale_num}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="order-controller">
              <div class="line"></div>
              <i-button v-if="order.exchange_status==2" type="primary" size="small" i-class="order-btn primary-btn"
                shape="circle" @click.stop="handleOrder(2,order.order_id)">确认收货</i-button>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <i-load-more v-if="!data&&isLoadEnd" :tip="'暂无数据'" :loading="loading" />
    <i-load-more v-if="!isLoadEnd" :tip="'加载更多数据'" :loading="loading" />
    <i-load-more v-if="data&&isLoadEnd" :tip="'没有更多数据了'" :loading="loading" />
    <i-toast id="toast" />
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  const {
    $Toast
  } = require("@/../static/iview/base/index");
  import Dialog from "@/../static/vant/dialog/dialog";
  import receiptModule from "@/components/receiptModule";
  import request from "@/api/request";
  import {
    getCollects,
    cancelCollect
  } from '@/utils/index'
  export default {
    components: {
      receiptModule
    },
    data() {
      return {
        active: 0,
        loading: false,
        data: null,
        isLoadEnd: false

      };
    },
    methods: {
      onChange(e) {
        console.log(e.mp.detail.index)
        this.active = e.mp.detail.index
        this.data = null
        this.isLoadEnd = false

        this.pointsOrderList(this.active + 1)
        // this.active = val
      },
      pointsOrderList() {
        this.loading = true
        request.pointsOrderList({
          status: this.active + 1,
          page: 1,
          page_num: 9999
        }).then(res => {
          this.loading = false
          if (res.data.list.length < 20) {
            this.isLoadEnd = true
          }
          if (this.data) {
            this.data = this.data.concat(res.data.list)
          } else {
            this.data = res.data.list
          }
        })
      },
      handleOrder(order_id) {
        // 1 - 取消订单 2 - 确认收货 3 - 退货
        let title = "";
        let message = "";

        title = "确认收货";
        message = "确认货品无误后，请确认收货!";

        Dialog.confirm({
            title,
            message
          })
          .then(() => {
            request
              .pointsConfirmOrder({
                order_id
              })
              .then(res => {
                $Toast({
                  content: res.message,
                  type: res.code == 0 ? "success" : "warning"
                });
                this.pointsOrderList(this.active + 1);
              }).catch(res => {
                console.log(res)
                $Toast({
                  content: res.message,
                  type: res.code == 0 ? "success" : "warning"
                });
              })
          })
          .catch(() => {
            console.log("取消");
            // on cancel
          });
      },
    },
    onReachBottom() {
      this.page++;
      this.pointsOrderList(this.active + 1);
    },
    mounted() {
      this.pointsOrderList(this.active + 1);
    }
  };

</script>

<style lang="less">
  .collects {}

  .order-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .order-tabs {}
  }

  .order-list {
    padding: 15px 15px;
    flex: 1;
    overflow: auto;
  }

  .order {
    margin-bottom: 15px;
    overflow: hidden;
  }

  .order-title {
    display: flex;
    justify-content: space-between;
    position: relative;
    background: #fff;
    padding: 0 15px;

    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 15px;
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      border: 0 solid #e9eaec;
      border-bottom-width: 1px;
    }

    .order-sn {
      line-height: 34px;
      font-size: 12px;
      color: #606060;
    }

    .order-status {
      line-height: 34px;
      font-size: 12px;
      color: #ee7559;
    }
  }

  .order-controller {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
    position: relative;

    .line {
      position: absolute;
      top: 0;
      left: 15px;
      right: 15px;

      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        transform-origin: 0 0;
        pointer-events: none;
        box-sizing: border-box;
        border: 0 solid #f8f8f8;
        border-top-width: 1px;
      }
    }

    .order-btn {
      font-size: 12px;
      height: 24px;
      line-height: 24px;
      margin: 8px 15px 8px 0;
      background: none !important;
    }

    .default-btn {
      color: #a0a0a0 !important;
      box-shadow: inset 0 0 0 1px #c9c9c9 !important;
    }

    .primary-btn {
      color: #ee7559 !important;
      box-shadow: inset 0 0 0 1px #ee7559 !important;
    }
  }

  .receipt-box {
    padding-bottom: 15px;
    background: #fff;
  }

</style>
